<template>
  <div class="coupon-mgr" v-loading.fullscreen.lock="loading">
    <page-main :pagination="pagination" @search-data="searchData" @page-change="pageChange">
      <template slot="search">
        <search-form :search="search"></search-form>
      </template>
      <template slot="append">
        <el-button type="primary" size="medium" @click="addCoupon">生成代金券</el-button>
      </template>
      <template slot="table">
        <el-table fit stripe border highlight-current-row class="coupon-mgr-table" :data="couponList" height="100%">
          <el-table-column prop="stockName" label="批次名称" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="面额(元)" min-width="120px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.couponAmount / 100}}</span>
            </template>
          </el-table-column>
          <el-table-column label="门槛(元)" min-width="120px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.transactionMinimum / 100}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shopName" label="所属店铺" min-width="120px" align="center"></el-table-column>
          <el-table-column prop="maxCouponsPerUser" label="单个用户可领数" min-width="120px" align="center"></el-table-column>
          <el-table-column label="有效时间" width="280px" align="center">
            <template slot-scope="scope">
              <span>{{$moment(scope.row.startTime).format('YYYY-MM-DD HH:mm')}}至{{$moment(scope.row.endTime).format('YYYY-MM-DD HH:mm')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="状态" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`couponMgr.status.${scope.row.status}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="是否停止" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`couponMgr.stopStatus.${scope.row.stopStatus}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="140px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="lookCoupon(scope.row)">查看</el-button>
              <el-button v-if="scope.row.stopStatus===0" size="mini" type="primary" @click="updateStatus(scope.row,1)">开启</el-button>
              <el-button v-else size="mini" type="danger" @click="updateStatus(scope.row,0)">停止</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </page-main>

    <el-dialog :title="dialogTitle[dialogType]" custom-class="sys-dialog" :close-on-click-modal="false" :visible.sync="openDialog" width="480px"
      top="10vh" @closed="dialogClosed">
      <div style="height:calc(80vh - 54px);overflow:auto">
        <coupon-form v-if="openDialog" :coupon="selectCoupon" :type="dialogType" :dropdown-option="dropdownOption" @save-success="saveSuccess">
        </coupon-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CouponMgrApi from 'services/couponMgrApi';

  import PageMain from 'commonComponents/pageMain';
  import SearchForm from './searchForm';
  import CouponForm from './couponForm';

  import Pagination from 'models/pagination';
  import CouponSearch from 'models/couponMgr/couponSearch';

  export default {
    data() {
      return {
        loading: false,
        search: new CouponSearch(),
        pagination: new Pagination(),
        couponList: [],
        openDialog: false,
        dialogType: '',
        selectCoupon: null,
        dropdownOption: {},
        dialogTitle: {
          add: "生成代金券",
          look: "代金券详情"
        }
      };
    },

    created() {
      this.setCouponList(true);
    },

    methods: {
      setCouponList(isSearch = false) {
        let search = this.search;
        if (!isSearch) {
          search.resetOldData();
        }

        let pagination = this.pagination;
        this.loading = true;
        CouponMgrApi.getCouponList(search, pagination).then(couponList => {
          if (isSearch) {
            search.setOldData();
          }

          this.couponList = couponList;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      searchData() {
        this.pagination.currentPage = 1;
        this.setCouponList(true);
      },

      pageChange() {
        this.setCouponList();
      },

      addCoupon() {
        this.dialogType = 'add';
        this.openDialog = true;
      },

      lookCoupon(coupon) {
        this.dialogType = 'look';
        this.selectCoupon = coupon;
        this.openDialog = true;
      },

      saveSuccess() {
        this.openDialog = false;
        this.setCouponList();
      },

      dialogClosed() {
        this.dialogType = '';
        this.selectCoupon = null;
      },

      updateStatus(coupon, status) {
        this.loading = true;
        CouponMgrApi.updateGouponStatus(coupon.stockId, status).then(() => {
          this.loading = false;
          this.setCouponList();
        }).catch(() => {
          this.loading = false;
        });
      }
    },

    components: {
      PageMain,
      SearchForm,
      CouponForm
    }
  };

</script>

<style lang="scss" scoped>
  .coupon-mgr {
    height: 100%;

    .coupon-mgr-table {
      .el-button+.el-button {
        margin-left: 0;
      }
    }
  }

</style>
